<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="screen-orientation" content="portrait" />
    <link rel="stylesheet" href="/Resources/css/app.css">
    <link rel="stylesheet" href="/Resources/css/bill.css">
</head>

<body>
    <div class="bill">
        <div class="confirm-head">
            企业对账函确认
            <a href="javascript:;">
                曹海涛
                <i class="icon icon-quit"></i>
            </a>
        </div>
        <div class="bill-introduce">
            找钢网正在对
            <span class='red'>2017年1月至6月</span>供货信息进行审计，下列数据出自找钢网业务出库记录，如与贵公司记录相符，
            <span class='red'>请点击确认</span>，如有问题请致电021-88888888。
        </div>
        <div class="bill-infor">
            <ul>
                <li>
                    <p class='line'></p>
                    <div class="radius radius-left">
                    </div>
                    <div class="radius radius-right">
                    </div>
                    <span class='halfradius halfradius-yellow'>
                        待确认
                    </span>
                    <div class="li-title">
                        上海华远实业有限公司
                    </div>
                    <div class="li-title-infor">
                        <div class="li-title-infor-left">
                            出库吨位
                        </div>
                        <div class="li-title-infor-right">
                            <span class='red'>12428.500</span>吨
                        </div>
                    </div>
                    <div class="li-title-infor">
                        <div class="li-title-infor-left">
                            实提金额
                        </div>
                        <div class="li-title-infor-right">
                            <span class='red'>323456985.20</span>元
                        </div>
                    </div>
                    <a href="javascript:;" class='download-xlsx'>
                        点击下载 上海华远实业有限公司对账函.xlsx
                    </a>
                    <div class="lamp-note">
                        <i class='icon icon-lamp'></i> 下载完成后可在浏览器下载记录里面进行查看！
                    </div>
                    <a href="javascript:;" class='btn-sure'>
                        确认
                    </a>
                </li>
                <li>
                    <p class='line'></p>
                    <div class="radius radius-left">
                    </div>
                    <div class="radius radius-right">
                    </div>
                    <span class='halfradius halfradius-green'>
                        已确认
                    </span>
                    <div class="li-title">
                        上海华远实业有限公司
                    </div>
                    <div class="li-title-infor">
                        <div class="li-title-infor-left">
                            出库吨位
                        </div>
                        <div class="li-title-infor-right">
                            <span class='red'>12428.500</span>吨
                        </div>
                    </div>
                    <div class="li-title-infor">
                        <div class="li-title-infor-left">
                            实提金额
                        </div>
                        <div class="li-title-infor-right">
                            <span class='red'>323456985.20</span>元
                        </div>
                    </div>
                    <a href="javascript:;" class='download-xlsx'>
                        点击下载 上海华远实业有限公司对账函.xlsx
                    </a>
                    <div class="lamp-note">
                        <i class='icon icon-lamp'></i> 下载完成后可在浏览器下载记录里面进行查看！
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 是否退出弹层 -->
    <div class="layer-quit-wrap none">
        <div class="layer-quit">
        </div>
        <div class="layer-quit-content">
            <div class="top">
                是否退出？
            </div>
            <div class="button-wrap">
                <button class="sure">
                    是
                </button>
                <button class="fail">
                    否
                </button>
            </div>
        </div>
    </div>
    <!-- 确认弹层 -->
    <div class="layer-sure-wrap none">
        <div class="layer-quit">
        </div>
        <div class="layer-quit-content">
            <div class="top">
                是否确认无误？
            </div>
            <div class="button-wrap">
                <button class="sure">
                    是
                </button>
                <button class="fail">
                    否
                </button>
            </div>
        </div>
    </div>
    <!-- 确认成功蒙层 -->
    <div class="layer layer-success">
        <i class='icon icon-success'></i> 确认成功
    </div>
    <!-- 确认失败蒙层 -->
    <div class="layer layer-fail">
        <i class='icon icon-fail'></i> 确认失败
    </div>
    <script src="/Resources/js/zepto.js"></script>
    <script>
    var ow = document.documentElement.clientWidth;
    if (ow > 540) {
        ow = 540
    }
    window.document.documentElement.style.fontSize = 5 * ow / 16 + "px";
    // 退出弹层
    $(document).on('click', '.confirm-head a', function() {
        $('.layer-quit-wrap').show();
    })
    $(document).on('click', '.layer-quit-wrap button', function() {
        $('.layer-quit-wrap').hide();
    })
    // 确认弹层
    $(document).on('click', '.bill-infor .btn-sure', function() {
        $('.layer-success,.layer-fail').hide()
        $('.layer-sure-wrap').show();
    })
    $(document).on('click', '.layer-sure-wrap button', function() {
        $('.layer-sure-wrap').hide();
    })
    $(document).on('click', '.layer-sure-wrap button.sure', function() {
        $('.layer-success').show();
        setTimeout(function() {
            $('.layer-success').hide();
        }, 2000)
    })
    $(document).on('click', '.layer-sure-wrap button.fail', function() {
        $('.layer-fail').show();
        setTimeout(function() {
            $('.layer-fail').hide();
        }, 2000)
    })
    </script>
</body>

</html>